import { PureComponent } from 'react';
import {
  Scene, OrthographicCamera, TextureLoader, PlaneGeometry,
  MeshLambertMaterial, Mesh, WebGLRenderer, PointLight,
  RepeatWrapping
} from 'three';

class Index extends PureComponent {

  async componentDidMount() {
    const scene = new Scene();

    const camera = new OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);
    camera.position.set(0, 0, 25);
    camera.lookAt(0, 0, 0);

    const plane = new PlaneGeometry(12, 12);

    const light = new PointLight(0xffffff, 1, 1000);
    light.position.set(10, 15, 20);
    scene.add(light);

    const textureLoader = new TextureLoader();
    const texture = await textureLoader.loadAsync('/img/chess.png');
    texture.wrapS = texture.wrapT = RepeatWrapping;
    texture.repeat.set(4, 4);

    const material = new MeshLambertMaterial({
      map: texture
    });

    const mesh = new Mesh(plane, material);
    scene.add(mesh);

    const renderer = new WebGLRenderer({
      canvas: document.getElementById('mainCanvas')
    });

    renderer.render(scene, camera);

  }

  render() {

    return (
      <canvas
        id="mainCanvas"
        width="400"
        height="300"
      />
    );
  }
}

export default Index;